import React, { Component } from "react";
import "../css/hdpiHeader.scss";
import moment from 'moment'
class HdpiHeader extends Component {
    constructor(props) {
        super(props);
        this.state = {
            date: new Date()
        }
        this.title = "锦界三维防磨防爆平台"
        //统计数据
        this.statData = [
            { name: "今日发电量", valve: "98781" },
            { name: "今日发电量", valve: "98782" },
            { name: "今日发电量", valve: "98783" },
            { name: "今日发电量", valve: "98784" },
            { name: "今日发电量", valve: "98785" },
        ]
    }

    componentDidMount() {
        this.timer = setInterval(() => {
            this.setState({
                date: new Date()
            })
        }, 1000);
    }

    componentWillUnmount() {
        clearInterval(this.timer)
    }

    render() {
        return (
            <>
                <div className="header">
                    <span className="title">{this.title}</span>
                    <div className="logo"></div>
                    <div className="time">
                        <div className="time-main">
                            <span className="time-date">{moment(this.state.date).format('YYYY年MM月DD日')}</span>
                            <span className="time-now">{moment(this.state.date).format('HH:mm:ss')}</span>
                        </div>
                    </div>
                    {this.statData.map((item, index) => {
                        return (
                            <div className="stat" key={index}>
                                <div className="stat-main">
                                    <span className="stat-name">{item.name}</span>
                                    <span className="stat-value">{item.valve}</span>
                                </div>
                                {index == 0 ? '' : <div className="stat-divider" />}
                            </div>
                        )
                    })}
                </div>
            </>
        )
    }

}

export default HdpiHeader;